<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品编号">
                <a-input v-model="queryParam.numbering" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="活动编号">
                <a-input v-model="queryParam.activity_numbering" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input v-model="queryParam.commodity_name" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="供应商名称">
                <a-input v-model="queryParam.supplier_name" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="商品添加时间">
                <a-range-picker :allowClear="true" ref="commodityCreatedAtRangePicker" @change="commodityCreatedAtRangeChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="活动抢购开始时间">
                <a-range-picker :allowClear="true" ref="commodityActivityPanicBuyingTimeRangePicker" @change="commodityActivityPanicBuyingTimeRangeChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button
                  type="primary"
                  @click="$refs.table.refresh(true)"
                >查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                <a-button style="margin-left: 8px" @click="handleExport">导出</a-button>
                <a-button style="margin-left: 8px" @click="handleExport(true)">大数据导出</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :scroll="{ x: 1300 }"
        :data="loadData"
        showPagination="auto"
      >
      </s-table>
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import PartnersForm from '@/views/proxy/partner/Form'
import { getProfitStatistics } from '@/api/finance'
import { formatAmount } from '@/utils/util'

export default {
  name: 'List',
  components: {
    PartnersForm,
    STable
  },
  data () {
    return {
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          width: '100px'
        },
        {
          title: '商品编号',
          dataIndex: 'numbering',
          width: '100px'
        },
        {
          title: '活动编号',
          dataIndex: 'commodity_activity_numbering',
          width: '100px'
        },
        {
          title: '商品名称',
          dataIndex: 'commodity_name',
          width: '100px'
        },
        {
          title: '规格',
          dataIndex: 'commodity_activity_sku',
          width: '100px',
          customRender: skus => skus.values.map(value => value.content).join('-')
        },
        {
          title: '商品添加时间',
          width: '130px',
          dataIndex: 'commodity_created_at'
        },
        {
          title: '活动抢购时间',
          width: '200px',
          customRender: item => [item.panic_buying_start_time, item.panic_buying_end_time].join(' ~ ')
        },
        {
          title: '供应商',
          width: '100px',
          dataIndex: 'supplier_name'
        },
        {
          title: '订单总数',
          width: '100px',
          dataIndex: 'quantity_sold'
        },
        {
          title: '退款总数',
          dataIndex: 'total_refunds',
          width: '100px'
        },
        {
          title: '退货总数',
          dataIndex: 'total_returns',
          width: '100px'
        },
        {
          title: '实际订单总数',
          customRender: item => item.quantity_sold - item.total_returns - item.total_refunds,
          width: '130px'
        },
        {
          title: '成本单价',
          customRender: item => formatAmount(item.commodity_activity_sku.purchase_price),
          width: '100px'
        },
        {
          title: '成本总金额',
          // 售出成本总金额 - 退款总成本 - 退货总成本
          customRender: item => formatAmount(item.quantity_sold_amount - item.total_returns_amount - item.total_refunds_amount),
          width: '130px'
        },
        {
          title: '大咖单价',
          customRender: item => formatAmount(item.commodity_activity_sku.strongman_price),
          width: '130px'
        },
        {
          title: '大咖出货量',
          dataIndex: 'strongman_shipments',
          width: '130px'
        },
        {
          title: '大咖总金额',
          customRender: item => formatAmount(item.strongman_shipments_amount),
          width: '130px'
        },
        {
          title: '精英单价',
          customRender: item => formatAmount(item.commodity_activity_sku.elite_price),
          width: '100px'
        },
        {
          title: '精英出货量',
          dataIndex: 'elite_shipments',
          width: '130px'
        },
        {
          title: '精英总金额',
          customRender: item => formatAmount(item.elite_shipments_amount),
          width: '130px'
        },
        {
          title: '群主单价',
          customRender: item => formatAmount(item.commodity_activity_sku.group_owner_price),
          width: '100px'
        },
        {
          title: '群主出货量',
          dataIndex: 'group_owner_shipments',
          width: '130px'
        },
        {
          title: '群主总金额',
          customRender: item => formatAmount(item.group_owner_shipments_amount),
          width: '130px'
        },
        {
          title: '直邀金额',
          customRender: item => formatAmount(item.commodity_activity_sku.direct_invitation),
          width: '100px'
        },
        {
          title: '直邀数量',
          dataIndex: 'number_of_direct_invitations',
          width: '100px'
        },
        {
          title: '直邀总金额',
          customRender: item => formatAmount(item.number_of_direct_invitations_amount),
          width: '130px'
        },
        {
          title: '间邀金额',
          customRender: item => formatAmount(item.commodity_activity_sku.indirect_invitation),
          width: '100px'
        },
        {
          title: '间邀数量',
          dataIndex: 'number_of_indirect_invitations',
          width: '100px'
        },
        {
          title: '间邀总金额',
          customRender: item => formatAmount(item.number_of_indirect_invitations_amount),
          width: '130px'
        },
        {
          title: '大咖与精英差价佣金',
          customRender: item => formatAmount(item.commodity_activity_sku.elite_price - item.commodity_activity_sku.strongman_price),
          width: '160px'
        },
        {
          title: '大咖与精英数量',
          dataIndex: 'number_of_strongman_with_elite_commissions',
          width: '130px'
        },
        {
          title: '大咖与精英总佣金',
          customRender: item => formatAmount(item.number_of_strongman_with_elite_commissions_amount),
          width: '150px'
        },
        {
          title: '精英与群主差价佣金',
          customRender: item => formatAmount(item.commodity_activity_sku.group_owner_price - item.commodity_activity_sku.elite_price),
          width: '160px'
        },
        {
          title: '精英与群主数量',
          dataIndex: 'number_of_elite_with_group_owner_commissions',
          width: '130px'
        },
        {
          title: '精英与群主总佣金',
          customRender: item => formatAmount(item.number_of_elite_with_group_owner_commissions_amount),
          width: '150px'
        },
        {
          title: '大咖与群主差价佣金',
          customRender: item => formatAmount(item.commodity_activity_sku.group_owner_price - item.commodity_activity_sku.strongman_price),
          width: '160px'
        },
        {
          title: '大咖与群主数量',
          dataIndex: 'number_of_strongman_with_group_owner_commissions',
          width: '130px'
        },
        {
          title: '大咖与群主总佣金',
          customRender: item => formatAmount(item.number_of_strongman_with_group_owner_commissions_amount),
          width: '150px'
        },
        {
          title: '总收入',
          customRender: item => formatAmount(
            item.strongman_shipments_amount + // 大咖出货总金额
            item.elite_shipments_amount + // 精英出货总金额
            item.group_owner_shipments_amount // 群主出货总金额
          ),
          width: '100px'
        },
        {
          title: '总成本',
          customRender: item => formatAmount(
            // 成本价 * 各个等级的出货量
            item.strongman_shipments_purchase_amount +
            item.elite_shipments_purchase_amount +
            item.group_owner_shipments_purchase_amount
          ),
          width: '100px'
        },
        {
          title: '总佣金',
          customRender: item => formatAmount(
            item.number_of_strongman_with_elite_commissions_amount + // 大咖与精英总佣金
            item.number_of_elite_with_group_owner_commissions_amount + // 精英与群主总佣金
            item.number_of_strongman_with_group_owner_commissions_amount // 大咖与群主总佣金
          ),
          width: '100px'
        },
        {
          title: '总直邀/间邀奖励',
          customRender: item => formatAmount(
            item.number_of_direct_invitations_amount + // 直接邀请
            item.number_of_indirect_invitations_amount // 间接邀请
          ),
          width: '150px'
        },
        {
          title: '利润',
          customRender: item => formatAmount(
            // 总收入 - 总成本
            (
              (item.strongman_shipments_amount - item.strongman_shipments_purchase_amount) + // 大咖出货总金额 - 大咖出货成本
              (item.elite_shipments_amount - item.elite_shipments_purchase_amount) + // 精英出货总金额 - 精英出货成本
              (item.group_owner_shipments_amount - item.group_owner_shipments_purchase_amount) // 群主出货总金额 - 群主出货成本
            ) -
            // - 总佣金
            (
              item.number_of_strongman_with_elite_commissions_amount + // 大咖与精英总佣金
              item.number_of_elite_with_group_owner_commissions_amount + // 精英与群主总佣金
              item.number_of_strongman_with_group_owner_commissions_amount // 大咖与群主总佣金
            ) -
            // - 总直邀/间邀奖励
            (
              item.number_of_direct_invitations_amount + // 直接邀请
              item.number_of_indirect_invitations_amount // 间接邀请
            )
          ),
          width: '100px'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getProfitStatistics(Object.assign(this.queryParam, parameter))
      }
    }
  },
  created () {

  },
  methods: {
    handleReset () {
      this.queryParam = {}
      this.$refs.commodityCreatedAtRangePicker.$refs.picker.clearSelection(new MouseEvent('click'))
      this.$refs.commodityActivityPanicBuyingTimeRangePicker.$refs.picker.clearSelection(new MouseEvent('click'))
    },
    commodityCreatedAtRangeChange (date, dateString) {
      this.queryParam.created_at_begin = dateString[0]
      this.queryParam.created_at_end = dateString[1]
    },
    commodityActivityPanicBuyingTimeRangeChange (date, dateString) {
      this.queryParam.panic_buying_start_time = dateString[0]
      this.queryParam.panic_buying_end_time = dateString[1]
    },
    handleExport (isAsync = false) {
      const exportParam = { export: true }
      ;(isAsync === true) && Object.assign(exportParam, { async: true })

      getProfitStatistics(Object.assign(exportParam, this.queryParam)).then(_ => {
        (isAsync === true) && this.$notification.success({ message: '添加任务成功,请关注[系统-异步导出任务]' })
      })
    }
  }
}
</script>
